<template>
  <div class="waste-enterprise">
    <div class="norem-title-wrap">
      <RouteHeadLine />
      <div class="search-wrap" v-if="showStatus == 0">
        <el-form ref="formRef" :model="params">
          <el-row :gutter="50">
            <el-col :span="6">
              <el-form-item label="行政区划：">
                <el-tree-select
                  v-model="params.district"
                  :data="adminAreaList"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态：">
                <el-select
                  v-model="params.status"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in enterpriseStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业名称：">
                <el-input v-model="params.customername" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="getList"
                  ><el-icon style="color: #fff; margin-right: 5px"
                    ><Search /></el-icon
                  >查询</el-button
                >
                <!-- <el-button
                  type="danger"
                  style="margin-left: 24px"
                  @click="handleDelete"
                  ><el-icon style="color: #fff; margin-right: 5px"
                    ><Delete /></el-icon
                  >删除</el-button
                > -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <button class="back" @click="handerBtn" v-if="showStatus != 0">
      <img src="@/assets/images/wasteenterprise/back-icon.png" alt="" />
      返回
    </button>
    <!-- 组存点 -->
    <div class="detail-wrap" v-if="searchDetail">
      <!-- <button @click="searchDetail = false">
        <img
          src="/src/assets/images/wasteenterprise/back-icon.png"
          alt=""
        />返回
      </button> -->
      <div class="detail-top-wrap">
        <div class="left">
          <h3>河南全会产废企业公司</h3>
          <div class="dun">
            <img src="@/assets/images/dun.png" alt="" />
            <div class="right">
              <div class="name">总重量（吨）</div>
              <div class="val">20.000.00</div>
            </div>
          </div>
          <div class="bao">
            <img src="@/assets/images/bao.png" alt="" />
            <div class="right">
              <div class="name">总包装（包）</div>
              <div class="val">71</div>
            </div>
          </div>
        </div>
        <div class="center">
          <h3>库存变化曲线图</h3>
          <div class="chart-wrap">
            <DetailLineChart />
          </div>
        </div>
        <div class="right-wrap">
          <h3>危废占比拼装图</h3>
          <div class="chart-wrap">
            <div class="left-chart">
              <DtailPieChart />
            </div>

            <ul class="right-num">
              <li>
                <div class="circle"></div>
                <div>451-612-21</div>
              </li>
              <li class="two">
                <div class="circle"></div>
                <div>451-612-21</div>
              </li>
              <li class="three">
                <div class="circle"></div>
                <div>451-612-21</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div
        class="content-wrap-btm b"
        style="flex-direction: column"
        v-if="!storageSearchDetail"
      >
        <div style="display: flex; width: 100%">
          <div class="storage-dot">
            <div class="name">贮存点1</div>
            <div class="unit">380.222吨</div>
            <div class="unit">16包</div>
            <div class="num">
              <div class="left">
                <div class="one">
                  <div class="model">831-001-01</div>
                  <div class="model-unit margin">239.888吨</div>
                </div>
                <div class="two">
                  <div class="model">831-001-01</div>
                  <div class="model-unit margin">239.888吨</div>
                </div>
              </div>
              <div class="right">
                <div class="one">
                  <div class="model">831-002-01</div>
                  <div class="model-unit">239.888吨</div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-chart-wrap">
            <div class="left-chart">
              <BtmOneLineChart />
            </div>
            <div class="btn-wrap">
              <button class="search-d" @click="handleSearch(1)">
                查看详情
              </button>
            </div>
          </div>
        </div>
        <div style="display: flex; width: 100%">
          <div class="storage-dot">
            <div class="name">贮存点1</div>
            <div class="unit">380.222吨</div>
            <div class="unit">16包</div>
            <div class="num">
              <div class="left">
                <div class="one">
                  <div class="model">831-001-01</div>
                  <div class="model-unit margin">239.888吨</div>
                </div>
                <div class="two">
                  <div class="model">831-001-01</div>
                  <div class="model-unit margin">239.888吨</div>
                </div>
              </div>
              <div class="right">
                <div class="one">
                  <div class="model">831-002-01</div>
                  <div class="model-unit">239.888吨</div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-chart-wrap">
            <div class="left-chart">
              <BtmTwoLineChart />
            </div>
            <div class="btn-wrap">
              <button class="search-d" @click="handleSearch(2)">
                查看详情
              </button>
            </div>
          </div>
        </div>
        <div style="display: flex; width: 100%">
          <div class="storage-dot">
            <div class="name">贮存点1</div>
            <div class="unit">380.222吨</div>
            <div class="unit">16包</div>
            <div class="num">
              <div class="left">
                <div class="one">
                  <div class="model">831-001-01</div>
                  <div class="model-unit margin">239.888吨</div>
                </div>
                <div class="two">
                  <div class="model">831-001-01</div>
                  <div class="model-unit margin">239.888吨</div>
                </div>
              </div>
              <div class="right">
                <div class="one">
                  <div class="model">831-002-01</div>
                  <div class="model-unit">239.888吨</div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-chart-wrap">
            <div class="left-chart">
              <BtmThreeLineChart />
            </div>
            <div class="btn-wrap">
              <button class="search-d" @click="handleSearch(3)">
                查看详情
              </button>
            </div>
          </div>
        </div>
        <div style="display: flex; width: 100%">
          <div class="storage-dot">
            <div class="name">贮存点1</div>
            <div class="unit">380.222吨</div>
            <div class="unit">16包</div>
            <div class="num">
              <div class="left">
                <div class="one">
                  <div class="model">831-001-01</div>
                  <div class="model-unit margin">239.888吨</div>
                </div>
                <div class="two">
                  <div class="model">831-001-01</div>
                  <div class="model-unit margin">239.888吨</div>
                </div>
              </div>
              <div class="right">
                <div class="one">
                  <div class="model">831-002-01</div>
                  <div class="model-unit">239.888吨</div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-chart-wrap">
            <div class="left-chart">
              <BtmFourLineChart />
            </div>
            <div class="btn-wrap">
              <button class="search-d" @click="handleSearch(4)">
                查看详情
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="data-wrap" v-if="storageSearchDetail">
        <el-table
          :data="tableData"
          border
          class="table-height"
          style="width: 100%"
        >
          <el-table-column label="包装批次" align="center"> </el-table-column>
          <el-table-column label="单位" align="center"> </el-table-column>
          <el-table-column label="产废名称" align="center"> </el-table-column>
          <el-table-column label="涉废代码" align="center"> </el-table-column>
          <el-table-column label="重量" align="center"> </el-table-column>
          <el-table-column label="废物类别" align="center"> </el-table-column>
          <el-table-column label="时间" align="center"> </el-table-column>
        </el-table>

        <Pagination
          style="margin-top: 22px"
          v-model:currentPage="detailParams.page"
          :total="total"
          v-model:page-size="detailParams.pagesize"
        />
      </div>
    </div>
    <!--产废 企业详情 -->
    <div class="enterprise-detail" v-if="showStatus == 1">
      <div class="main-wrap">
        <div class="title-name">
          <div class="line"></div>
          企业详情
        </div>
        <div class="detail-wrap">
          <div class="line">
            <div class="left">
              企业名称：{{ enterpriseDetail.customername }}
            </div>
            <div class="right">
              排污许可证号：{{ enterpriseDetail.dischargelicense }}
            </div>
          </div>
          <div class="line">
            <div class="left">
              区域：{{ getArea(adminAreaList, enterpriseDetail.district) }}
            </div>
            <div class="right">
              详细地址：{{ enterpriseDetail.customeraddress }}
            </div>
          </div>
          <div class="line">
            <div class="left">
              年产废规模：{{ enterpriseDetail.wastescale }}
            </div>
            <!-- <div class="left">
              管辖地：{{
                adminManageList.find(
                  (item) => item.id == enterpriseDetail.district
                )?.departmentname
              }}
            </div> -->
            <div class="right">
              企业类型：{{ enterpriseDetail.managementtype }}
            </div>
          </div>
          <div class="line">
            <div class="right">
              环保管理员1：{{ enterpriseDetail.hbperson }}
            </div>
            <div class="left">手机号1：{{ enterpriseDetail.hbmobile }}</div>
          </div>
          <div class="line">
            <div class="right">
              环保管理员2：{{ enterpriseDetail.hbpersonsecond }}
            </div>
            <div class="left">
              手机号2：{{ enterpriseDetail.hbmobilesecond }}
            </div>
          </div>
          <div class="line">
            <div class="right">排污许可证二维码：</div>
            <div class="left" style="align-self: flex-start">
              企业状态：{{ enterpriseDetail.status == 1 ? "正常" : "停用" }}
            </div>
          </div>
          <div class="line">
            <div class="left">
              <img
                @click="searchImg(enterpriseDetail.dischargelicenseurl)"
                :src="enterpriseDetail.dischargelicenseurl"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>

      <div class="edit dec">
        <button
          class="declaration"
          :style="
            enterpriseDetail.openflag == 1 ? 'background-color:#ff0000' : ''
          "
          @click="openDeclaration()"
        >
          {{
            enterpriseDetail.openflag == 1
              ? "关闭申报"
              : enterpriseDetail.openflag == 2
              ? "开通申报"
              : ""
          }}
        </button>
        <el-button class="btn-edit" @click="editEnterpriseDetailMsg">
          <el-icon style="color: #fff; margin-right: 7px"><EditPen /></el-icon
          >编辑</el-button
        >
      </div>
    </div>
    <!--产废企业 企业设施 -->
    <div class="enterprise-facility" v-if="showStatus == 2 && facilityListFlag">
      <div class="main-wrap">
        <div class="title-name">
          <div class="line"></div>
          企业设施
        </div>
      </div>
      <div class="enterprise-facility-title">
        <el-form :model="facilityParams">
          <el-row>
            <el-col :span="6">
              <el-form-item label="设施名称："
                ><el-input
                  v-model="pagiFacilityParams.devicename"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态：" label-width="100px">
                <el-select
                  v-model="pagiFacilityParams.status"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in deviceStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="涉废类型：">
                <el-select
                  v-model="pagiFacilityParams.devicetype"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in wasteList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button
                type="primary"
                style="margin-left: 20px; font-size: 20px; padding-top: 10px"
                @click="getFacilityList"
                ><el-icon
                  style="color: #fff; margin-right: 5px; font-size: 20px"
                  ><Search /></el-icon
                >查询</el-button
              >
              <!-- <el-button
                type="danger"
                style="margin-left: 24px"
                @click="handleDelete"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Delete /></el-icon
                >删除</el-button
              > -->
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table-wrap data-wrap">
        <el-table
          :data="facilityList"
          border
          class="table-height"
          style="width: 100%"
        >
          <el-table-column prop="devicename" align="center" label="设施名称" />
          <el-table-column prop="devicecode" align="center" label="设施编号" />
          <el-table-column
            prop="hbperson"
            align="center"
            label="联系人"
            width="150"
          />
          <el-table-column prop="hbmobile" align="center" label="联系方式" />
          <el-table-column
            width="180"
            prop="installposition"
            align="center"
            label="安装位置"
          />
          <el-table-column
            prop="status"
            align="center"
            label="状态"
            width="110"
          >
            <template #default="{ row }">
              <div :style="row.status == 1 ? 'color:#0874FA' : 'color:#FF0000'">
                {{ row.status == 1 ? "正常" : "停用" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="340" align="center">
            <template #default="{ row }">
              <div class="btn-wrap">
                <button class="detail" @click="facilityDetail(row.id)">
                  详情
                </button>
                <button
                  class="edit"
                  @click="editFacilityDetail(row.id)"
                  style="color: #fa8508"
                >
                  编辑
                </button>
                <button
                  @click="stopDevice(row.id, row.status)"
                  class="stop"
                  :style="
                    row.status == 1
                      ? 'color: #fa0808'
                      : 'background:#d6eede;color:#30a858'
                  "
                >
                  {{ row.status == 1 ? "停用" : "启用" }}
                </button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding-right: 60px; margin-top: 20px">
          <Pagination
            v-model:currentPage="pagiFacilityParams.page"
            :total="pagiFacilityTotal"
            v-model:page-size="pagiFacilityParams.pagesize"
            @getDataList="getFacilityList"
          />
        </div>
      </div>
    </div>
    <!--企业设施  企业详情 -->
    <div class="enterprise-detail" v-if="showStatus == 2 && !facilityListFlag">
      <div class="main-wrap">
        <div class="title-name">
          <div class="line"></div>
          企业设施
        </div>

        <div class="detail-wrap">
          <div class="line">
            <div class="left">
              二维码编号：{{ facilityDetailMsg.devicecode }}
            </div>
            <div class="right">
              设施名称：{{ facilityDetailMsg.devicename }}
            </div>
          </div>
          <div class="line">
            <div class="left">
              涉废类型：{{
                wasteList.find(
                  (item) => item.value == facilityDetailMsg.devicetype
                )?.label
              }}
            </div>
            <div class="right">
              处理设计风量(m³/h)：{{ facilityDetailMsg.designairvolume }}
            </div>
          </div>
          <div class="line">
            <div class="left">
              设计使用量(kg)：{{ facilityDetailMsg.designusenum }}
            </div>
            <div class="right">
              更换周期：{{ facilityDetailMsg.recircledays }}
            </div>
          </div>
          <div class="line">
            <div class="left">
              环保管理员1：{{ facilityDetailMsg.hbperson }}
            </div>
            <div class="right">手机号1：{{ facilityDetailMsg?.hbmobile }}</div>
          </div>
          <div class="line">
            <div class="left">
              环保管理员2：{{ facilityDetailMsg.hbpersonsecond }}
            </div>
            <div class="right">
              手机号2：{{ facilityDetailMsg?.hbmobilesecond }}
            </div>
          </div>

          <div class="line">
            <div class="left">
              <img
                @click="searchImg(facilityDetailMsg.qrcodeurl)"
                :src="facilityDetailMsg.qrcodeurl"
                alt=""
              />
            </div>
            <div class="right"></div>
          </div>
        </div>
      </div>

      <!-- <div class="edit">
        <el-button class="btn-edit" @click="editFacilityDetailMsg">
          <el-icon style="color: #fff; margin-right: 7px"><EditPen /></el-icon
          >编辑</el-button
        >
        <el-button class="close-btn">
          <el-icon style="color: #fff; margin-right: 7px"
            ><CircleClose /></el-icon
          >停用</el-button
        >
      </div> -->
    </div>
    <!-- 表格 -->
    <div class="data-wrap" v-if="showStatus == 0">
      <el-table
        :data="tableData"
        :show-overflow-tooltip="true"
        border
        class="table-height"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="60" />
        <el-table-column prop="districtname" align="center" label="所属行政区">
        </el-table-column>
        <!-- <el-table-column prop="district" align="center" label="所属行政区">
          <template #default="{ row }">
            <div>row.districtname</div>
          </template>
        </el-table-column> -->
        <el-table-column prop="customername" align="center" label="企业名称" />
        <el-table-column prop="wastescale" align="center" label="年产废规模" />
        <el-table-column
          prop="hbperson"
          align="center"
          label="联系人"
          width="120"
        />
        <el-table-column
          prop="hbmobile"
          align="center"
          label="联系方式"
          width="160"
        />
        <el-table-column prop="customeraddress" align="center" label="地址" />

        <el-table-column prop="address" align="center" label="状态" width="100">
          <template #default="{ row }">
            <div>
              {{ row.status == 1 ? "正常" : "停用" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="committime" align="center" label="提交时间" />
        <el-table-column prop="address" align="center" label="操作" width="270">
          <!-- b #CEE3FE    c  #0874FA   审核-->
          <template #default="{ row }">
            <div class="table-btn-wrap">
              <button
                class="detail"
                @click="searchEnterpriseDetail(row.id, row.status, row)"
              >
                企业详情
              </button>
              <button class="facility" @click="searchFacilityDetail(row.id)">
                企业设施
              </button>
              <!-- <button class="detail" @click="storagePoint">贮存点</button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-right: 60px; margin-top: 25px">
        <Pagination
          v-model:currentPage="params.page"
          :total="total"
          v-model:page-size="params.pagesize"
          @getDataList="getList"
        />
      </div>
    </div>

    <EditEnterpriseDetail
      v-model:showDialog="showEditEnterpriseDetail"
      @save="editEnterpriseDetailSave"
      :enterpriseDetail="enterpriseDetail"
    />
    <EditFacilityDetail
      v-model:showDialog="showEditFacilityDetail"
      @save="editFacilityDetailSave"
      :facilityDetailMsg="facilityDetailMsg"
    />
  </div>
  <OperateDialog
    :msg="operateMsg"
    @save="operateSave"
    v-model:showDialog="operateDialogFlag"
  />
  <OperateDialog
    :msg="operateStopMsg"
    @save="operateStopSave"
    v-model:showDialog="operateStopFlag"
  />
  <!-- 图片预览 -->
  <el-image-viewer
    v-if="showImg"
    @close="showImg = false"
    :url-list="srcList"
  />
</template>
<script setup lang="ts">
import Pagination from "@/components/Pagination.vue";
import RouteHeadLine from "@/components/RouteHeadLine.vue";
import http from "@http";
import OperateDialog from "@/components/operateDialog";
import changeArea from "@/utils/changeArea.js";
import { getArea } from "@/utils/changeArea.js";
let operateStopFlag = ref(false);
let operateStopMsg = ref("");
// import Dialog from "@/components/DialogCross";
import EditEnterpriseDetail from "./editEnterpriseDetail";
import EditFacilityDetail from "./editFacilityDetail";
import ElMessage from "@/components/ElMessage.js";
import DetailLineChart from "./detailLineChart";
import DtailPieChart from "./detailPieChart";
import BtmOneLineChart from "./btmOneLineChart";
import BtmTwoLineChart from "./btmTwoLineChart";
import BtmThreeLineChart from "./btmThreeLineChart";
import BtmFourLineChart from "./btmFourLineChart";
let params = reactive({
  page: 1,
  pagesize: 10,
});
let deviceStatusList = ref([]);
let storageSearchDetail = ref(false);
let showImg = ref(false);
let operateDialogFlag = ref(false);
let operateMsg = ref("");
let openOrCloseData = ref({});
let total = ref(1);
let srcList = ref([]);
let wasteList = ref([]);
let facilityListFlag = ref(true);
let searchDetail = ref(false);
let adminAreaList = ref([]);
let detailParams = reactive({});
let adminManageList = ref([]);
let enterpriseDetail = ref([]);
let enterpriseId = ref("");
let pagiFacilityParams = reactive({ pagesize: 10, page: 1 });
let enterpriseStatusList = ref([]);
let facilityList = ref([]); //企业设施列表
let searchWrapStyle = ref("146px");
let showEditEnterpriseDetail = ref(false); //企业详情弹框
let showEditFacilityDetail = ref(false); //企业设施弹框
let showDialog = ref(false);
let operateStopStatus = ref("");
let operateStopFlagId = ref("");
let facilityDetailMsg = ref({});
let handleSearch = () => {
  storageSearchDetail.value = true;
};
let facilityId = ref("");
let pagiFacilityTotal = ref(1);
let storagePoint = () => {
  searchDetail.value = true;
  showStatus.value = 99;
};
//企业设施里的编辑
let editFacilityDetailMsg = () => {
  showEditFacilityDetail.value = true;
};
let searchImg = (url) => {
  showImg.value = true;
  srcList.value = [url];
};
let facilityParams = reactive({}); // 企业设施查询参数
let form = reactive({});
let stopDevice = (id, status) => {
  console.log(id, "id");
  operateStopFlagId.value = id;
  operateStopStatus.value = status;
  operateStopFlag.value = true;
  operateStopMsg.value = status == 1 ? "确定要停用吗?" : "确定要启用吗?";
  let flag = status == 1 ? 2 : 1;
};
//停用确认
let operateStopSave = () => {
  let status = operateStopStatus.value == 1 ? 2 : 1;
  // 设备状态 1：启用 2：停用
  http({
    url: "/device/applyStopUse",
    data: { status, id: operateStopFlagId.value },
  }).then((res) => {
    if (res.code == 0) {
      // ElMessage({msg:'操作成功'})
      operateStopFlag.value = false;
      getFacilityList();
    }
  });
};
/* 企业设施详情 */
let facilityDetail = (id) => {
  facilityListFlag.value = false;
  facilityId.value = id;
  http({ url: "/device/detail", data: { id } }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      facilityDetailMsg.value = res.data;
    }
  });
};
let getFacilityList = () => {
  http({ url: "/device/datalist", data: pagiFacilityParams }).then((res) => {
    if (res.code == 0) {
      facilityList.value = res.data.list;
      pagiFacilityTotal.value = res.data.total;
      if (facilityId.value) {
        http({ url: "/device/detail", data: { id: facilityId.value } }).then(
          (res) => {
            if (res.code == 0) {
              facilityDetailMsg.value = res.data;
            }
          }
        );
      }
      ElMessage({
        msg: "操作成功",
      });
    }
  });
};
/* 企业设施编辑 */
let editFacilityDetail = (id) => {
  showEditFacilityDetail.value = true;
  http({ url: "/device/detail", data: { id } }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      facilityDetailMsg.value = res.data;
    }
  });
};
let editEnterpriseDetailMsg = () => {
  showEditEnterpriseDetail.value = true;
};
let showStatus = ref(0);
let options = ref([
  { label: "佛挡杀", value: 2 },
  { label: "佛挡杀", value: 2 },
]);
let handleAudit = () => {
  showDialog.value = true;
};
//企业详情弹框确认按钮
let editEnterpriseDetailSave = () => {
  getList();
};
//企业设施弹框确认按钮
let editFacilityDetailSave = () => {
  getFacilityList();
};
watch(
  () => showStatus.value,
  () => {
    if (showStatus.value == 0) {
      searchWrapStyle.value = "146px";
    } else {
      searchWrapStyle.value = "70px";
    }
  },
  { deep: true }
);
let getList = () => {
  http({ url: "/admPCEnterprise/datalist", data: params }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      if (enterpriseId.value) {
        http({
          url: "/enterprise/detail",
          data: { id: enterpriseId.value },
        }).then((res) => {
          if (res.code == 0) {
            enterpriseDetail.value = res.data;
          }
        });
      }

      tableData.value = res.data.list;
      total.value = res.data.total;
      ElMessage({
        msg: "查询成功",
      });
    }
  });
};
let searchEnterpriseDetail = (id, status) => {
  // if (status !== 1) {
  //   ElMessage({ type: "warning", msg: "该企业已停用，无法查看详情" });
  //   return;
  // }
  showStatus.value = 1;
  enterpriseId.value = id;
  http({ url: "/enterprise/detail", data: { id } }).then((res) => {
    if (res.code == 0) {
      enterpriseDetail.value = res.data;
    }
  });
};
let searchFacilityDetail = (id) => {
  showStatus.value = 2;
  pagiFacilityParams.enterpriseid = id;
  getFacilityList();
};
let handerBtn = () => {
  if (!facilityListFlag.value) {
    facilityListFlag.value = true;
    return;
  }
  if (storageSearchDetail.value) {
    storageSearchDetail.value = false;
    return;
  }
  showStatus.value = 0;
  searchDetail.value = false;
};
let operateSave = () => {
  let status = openOrCloseData.value.openflag == 1 ? 2 : 1;
  http({
    url: "/admPCEnterprise/doPermitApply",
    data: {
      openflag: status,
      id: openOrCloseData.value.id,
    },
  }).then((res) => {
    if (res.code == 0) {
      let msg;
      if (status == 1) {
        msg = "开通申报成功";
      } else {
        msg = "关闭申报成功";
      }
      ElMessage({ msg });
      getList();
      operateDialogFlag.value = false;
    }
  });
};
//开关闭申报
let openDeclaration = () => {
  operateDialogFlag.value = true;
  operateMsg.value =
    enterpriseDetail.value.openflag == 1
      ? "确定要关闭申报吗?"
      : "确定要开通申报吗?";
  openOrCloseData.value = {
    openflag: enterpriseDetail.value.openflag,
    id: enterpriseDetail.value.id,
  };
};
let diaBack = () => {
  console.log("-=-=");
  showDialog.value = false;
};
let diaSave = () => {};
let tableData = ref([]);
let handleDelete = () => {
  console.log(params, "params");
};

onMounted(() => {
  http({ url: "/listitem/getmodule", data: { module: "B06" } }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      enterpriseStatusList.value = res.data.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  http({ url: "/listitem/getmodule", data: { module: "B02" } }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      deviceStatusList.value = res.data.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  http({ url: "/listitem/getmodule", data: { module: "B03" } }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      wasteList.value = res.data.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  http({ url: "/region/datalisttree" }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      adminAreaList.value = changeArea(res.data);
      console.log(adminAreaList.value, "value");
    }
  });
  getList();
});
http({ url: "/listitem/getdepartment" }).then((res) => {
  console.log(res, "res11");
  if (res.code == 0) {
    adminManageList.value = res.data;
  }
});
</script>
<style lang="scss" scoped>
.waste-enterprise {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;
  .enterprise-facility {
    padding-left: 0;
    height: calc(100vh - 80px - 63px);
    background-color: #fff;
    padding-top: 25px;
    .table-wrap {
      margin-top: 0 !important;
      padding-left: 8px;
      padding-top: 0 !important;
      padding-right: 8px;
      .table-height {
        height: 480px !important;
      }
      .btn-wrap {
        display: flex;
        justify-content: space-between;
        padding-left: 19px;

        padding-right: 17px;
        button {
          width: 89px;
          height: 37px;
          border-radius: 4px;
        }
        .detail {
          background-color: #cee3fe;
        }
        .edit {
          background-color: #fee7ce;
        }
        .stop {
          background-color: #fecece;
        }
      }
    }

    .enterprise-facility-title {
      :deep(.el-form-item__label) {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 22px;
        color: #333333;
      }
      :deep(.el-form) {
        margin-top: 20px;
        padding-left: 30px;
      }
      :deep(.el-input) {
        /* width: 280px !important; */
        height: 40px;
        background: #ffffff;
        border-radius: 4px;
        /* border: 1px solid #cccccc; */
      }

      :deep(.el-button) {
        width: 89px;
        height: 37px;

        border-radius: 4px;
        box-shadow: none;
      }
      :deep(.el-icon) {
        font-size: 15px;
      }
      :deep(.el-button--primary) {
        background-color: #0874fa !important;
      }
      :deep(.el-input__inner) {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
      }
      :deep(.el-input__inner::placeholder) {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #999999;
      }
      :deep(.el-button--danger) {
        background-color: #fa0808 !important;
      }
      :deep(.el-form-item__label) {
        line-height: 40px;
      }
    }
    .title-name {
      display: flex;
      align-items: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #333333;

      .line {
        width: 5px;
        height: 36px;
        background: #0874fa;
        margin-right: 26px;
      }
    }
  }
  .enterprise-detail {
    height: calc(100vh - 80px - 63px);
    background-color: #fff;
    padding-top: 25px;
    display: flex;
    .edit.dec {
      display: flex;
    }
    .edit {
      .close-btn {
        margin-left: 20px;
        width: 108px;
        height: 37px;
        background: #fa0808;
        border-radius: 4px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
      }
      .declaration {
        width: 108px;
        height: 37px;
        font-size: 20px;
        border-radius: 4px;
        color: #ffffff;
        background-color: #0db600;
        margin-right: 40px;
      }
      .btn-edit {
        padding-left: 5px;
        width: 108px;
        height: 37px;
        background: #0874fa;
        border-radius: 4px;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
      }
    }
    .main-wrap {
      width: 900px;
      .detail-wrap {
        margin-top: 30px;
        border: 1px solid #cccccc;
        margin-left: 30px;
        padding-left: 28px;
        padding-bottom: 50px;
        .line {
          margin-top: 33px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 500;
          font-size: 20px;
          color: #333333;

          .left {
            flex: 1;
            img {
              width: 209px;
              height: 225px;
              border: 1px solid #cccccc;
            }
          }
          .right {
            flex: 1;
            text-align: left;
            white-space: nowrap;
            img {
              width: 155px;
              height: 156px;
              border: 1px solid #cccccc;
            }
          }
        }
      }
      .title-name {
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 28px;
        color: #333333;

        .line {
          width: 5px;
          height: 36px;
          background: #0874fa;
          margin-right: 26px;
        }
      }
    }
  }
  .back {
    margin-top: 10px;
    width: 94px;
    height: 43px;
    background: #9dafc1;
    border-radius: 4px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    img {
      width: 21px;
      height: 17px;
    }
  }
  .detail-wrap {
    .data-wrap {
      margin-top: 8px;
      background: #ffffff;
      padding: 8px;
      padding-bottom: 0px;
      .table-height {
        max-height: 31vh;
        overflow-y: scroll;
      }
    }
    .detail-top-wrap {
      display: flex;
      align-items: center;

      .left {
        width: 315px;
        height: 324px;
        background: #ffffff;
        padding-top: 20px;

        padding-left: 37px;
        h3 {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24px;
          color: #000000;
        }
        .dun {
          display: flex;
          align-items: center;
          margin-top: 50px;
          img {
            width: 52px;
            height: 52px;
            margin-right: 27px;
          }
          .right {
            display: flex;
            flex-direction: column;

            .name {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 20px;
              color: #999999;
            }
            .val {
              font-family: SeoulNamsan EB;
              font-weight: 400;
              font-size: 30px;
              color: #000000;
              margin-top: 20px;
            }
          }
        }
        .bao {
          display: flex;
          align-items: center;
          margin-top: 42px;
          /* justify-content: space-between; */
          img {
            width: 52px;
            height: 52px;
            margin-right: 27px;
          }
          .right {
            display: flex;
            flex-direction: column;

            .name {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 20px;
              color: #999999;
            }
            .val {
              font-family: SeoulNamsan EB;
              font-weight: 400;
              font-size: 30px;
              color: #000000;
              margin-top: 20px;
            }
          }
        }
      }
      .center {
        width: 695px;
        height: 324px;
        background: #ffffff;
        margin-left: 12px;

        h3 {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24px;
          color: #000000;
          margin-top: 20px;
          margin-left: 28px;
        }
        .chart-wrap {
        }
      }
      .right-wrap {
        width: 591px;
        height: 324px;
        background: #ffffff;
        margin-left: 12px;

        .chart-wrap {
          display: flex;
          align-items: center;
          margin-top: 30px;
          padding-left: 40px;
          .left-chart {
            flex: 1;
          }
          .right-num {
            flex: 1;
            .two {
              .circle {
                width: 18px;
                height: 17px;
                background: #f73249;
                border-radius: 50%;
              }
            }
            .three {
              .circle {
                width: 18px;
                height: 17px;
                background: #f8e000;
                border-radius: 50%;
              }
            }
            li:first-child {
              margin-top: 0;
            }
            li {
              display: flex;
              align-items: center;
              margin-top: 46px;
              .circle {
                width: 18px;
                height: 17px;
                background: #176ff9;
                border-radius: 50%;
                margin-right: 9px;
              }
              div {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 18px;
                color: #333333;
                line-height: 20px;
              }
            }
          }
        }
        h3 {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24px;
          color: #000000;
          margin-top: 20px;
          margin-left: 29px;
        }
      }
    }
    button {
      display: flex;
      align-items: center;
      width: 94px;
      height: 43px;
      background: #9dafc1;
      border-radius: 4px;
      margin-top: 10px;
      margin-bottom: 10px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 20px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      img {
        width: 21px;
        height: 17px;
        margin-right: 3px;
      }
    }
  }
  .norem-title-wrap {
    height: v-bind("searchWrapStyle");
    background: #ffffff;
    padding-top: 20px;

    /* width: 100%; */
    .search-wrap {
      margin-top: 30px;
      padding-left: 35px;
      padding-right: 43px;
    }
  }
  .content {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .table-btn-wrap {
    display: flex;
    justify-content: space-between;
    button {
      width: 109px;
      height: 37px;

      border-radius: 4px;
    }
    .detail {
      font-weight: 400;
      font-size: 19px;
      color: #0874fa;
      background-color: #cee3fe;
    }
    .facility {
      font-weight: 400 !important;
      font-size: 19px !important;
      color: #14b069 !important;
      background-color: #d0efe1 !important;
    }
    .declaration {
      font-weight: 400;
      font-size: 19px;
      color: #0874fa;
      background: #cee3fe;
    }
  }
  .content-wrap-btm.b {
    height: calc(40.5vh);
    background-color: #fff;
    margin-top: 1vh;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    overflow: scroll;
    .right-chart-wrap {
      flex: 1;
      height: 146px;
      margin-top: 0.5vh;
      background-color: #f8f9fc;
      display: flex;
      align-items: center;
      .left-chart {
        width: 475px;
        height: 129px;
        background: #ffffff;
      }
      .btn-wrap {
        margin-left: 30px;
        .search-d {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 22px;
          color: #0066ff;
          background-color: #f8f9fc;
          width: 128px;
          height: 50px;
          border-radius: 10px;
          border: 1px solid #0874fa;
        }
      }
    }
    .storage-dot {
      display: flex;
      align-items: center;
      width: 890px;

      margin-top: 0.5vh;
      height: 146px;
      text-align: center;
      height: 146px;
      line-height: 146px;
      .name {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        width: 92px !important;

        background: #f0f5fc;
        height: 146px;
        line-height: 146px;
        flex-shrink: 0;
      }
      .unit {
        display: flex;
        width: 160px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        flex-shrink: 0;
        background-color: #f8f9fc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .num {
        width: 479px !important;
        height: 146px;
        line-height: 146px;

        background: #f0f5fc;
        display: flex;
        align-items: center;
        justify-content: space-between;

        overflow: hidden;
        padding-left: 18px;
        flex-shrink: 0;

        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .two {
            margin-top: 6px;
          }
          .one,
          .two {
            display: flex;
            .model {
              width: 105px;

              background: #b6c4d6;
              height: 32px;
              line-height: 32px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
            }

            .model-unit {
              width: 105px;
              height: auto !important;
              background: #ffffff;
              height: 32px;
              line-height: 32px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #666666;
            }
          }
        }
        .right {
          padding-left: 18px;
          padding-right: 22px;
          .one {
            display: flex;
            align-items: center;
            .model {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
              width: 105px;
              height: 32px;
              line-height: 32px;
              background: #b6c4d6;
            }
            .model-unit {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #666666;
              width: 105px;
              height: 32px;
              line-height: 32px;
              background: #ffffff;
            }
          }
        }
      }
    }
  }
  .data-wrap {
    margin-top: 10px;
    width: 100%;
    height: calc(100vh - 80px - 10px - 146px);
    background: #fff;
    padding: 10px 8px 0 8px;
    .table-height {
      max-height: calc(100vh - 36.5vh);
      overflow-y: scroll;

      button {
        width: 115px;
        height: 39px;
        background: #e5efff;
        border-radius: 5px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #0874fa;
      }
    }
  }
}
</style>
